<template>
    <div class="page">
      <header class="header">
        <h1>{{ article.title }}</h1>
        <div class="meta">
          <span>原</span> {{ userDetails.username }} 于 {{ formattedDate }} 
          阅读量 {{ article.views }} 文章标签:<span v-for="tag in tags" :key="tag" class="tag">{{ tag.name }}</span>
        </div>
      </header>
      <div class="content">
        <aside class="sidebar">
          <div class="profile">
            <img :src="userDetails.avaterUrl" alt="Profile Picture" class="avatar">
            <p>{{ userDetails.username }}</p>
            <button>私信</button>
            <button>关注</button>
          </div>
          <div class="ads">
            <img src="ad1.png" alt="Ad 1">
            <img src="ad2.png" alt="Ad 2">
          </div>
        </aside>
        <main class="main-content">
          <div class="article-meta">
            <h2>Linux系统编程</h2>
            <p>专栏收藏该内容</p>
            <p>系列专栏: 【C语言详解】【数据结构详解】【C++详解】【Linux系统编程】</p>
          </div>
          <div class="article-content" v-html="article.content"></div>
          <div class="toc">
            <h3>目录</h3>
            <ul>
              <li>共享内存的概念</li>
              <li>创建共享内存
                <ul>
                  <li>函数介绍</li>
                  <li>代码测试</li>
                </ul>
              </li>
              <li>封装成类</li>
            </ul>
          </div>
        </main>
      </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        article: {
          title: '',
          belongsTo: '',
          views: 0,
          content: ''
        },
        formattedDate: '',
        tags: [],
        userDetails: {},
      };
    },
    async created() {
      const articleId = "dca63763-aa37-4e3b-abeb-b8bd4ddc8531"; // 示例文章ID
      const lang = "zh"; // 语言
      const response = await axios.get(`/api/doc/getArticle?articleId=${articleId}&lang=${lang}`);
      
      if (response.data.code === 200200) {
        const data = response.data.data.baseArticle;
        this.article = data;
        this.formattedDate = new Date(data.updatedAt).toLocaleString(); // 格式化日期
        this.tags = response.data.data.tags;
        this.userDetails = response.data.data.userDetails;
      }
    }
  }
  </script>
  
  <style>
  .page {
    font-family: Arial, sans-serif;
  }
  
  .header  {
    background-color: #f4f4f4;
    padding: 10px;
    border-bottom: 1px solid #ddd;
  }

  .meta {
    color: #888;
    font-size: 0.9em;
  }
  
  .content {
    display: flex;
    margin: 20px;
  }
  
  .sidebar {
    width: 25%;
    padding: 10px;
    border-right: 1px solid #ddd;
  }
  
  .profile {
    text-align: center;
  }
  
  .ads img {
    width: 100%;
    margin-top: 10px;
  }
  
  .main-content {
    width: 75%;
    padding: 20px;
  }
  
  .article-meta {
    background-color: #f9f9f9;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 4px;
  }
  
  .article-content {
    margin-bottom: 20px;
  }
  
  .toc {
    background-color: #ffffff;
    padding: 10px;
    border-radius: 4px;
  }
  
  .toc ul {
    list-style: none;
    padding: 0;
  }
  
  .toc li {
    margin: 5px 0;
  }
  
  .toc li ul {
    padding-left: 20px;
  }
  .avatar {
  width: 50px;  /* 调整头像宽度 */
  height: 50px; /* 调整头像高度 */
  border-radius: 50%; /* 设置为圆形 */
  object-fit: cover; /* 确保头像比例 */
}
  </style>
  